<include file="Public/header"/>
<div class="park-header">
    <div class="park-header__title">发表评论</div>
    <div class="park-header__left">
        <i class="iconfont icon-fanhui park-back"></i>
    </div>
</div>
<div class="container">
    <form onsubmit="return sub_comment();">
        <div class="park-order-container">
            <volist name="info" id="val">
            <div class="park-order-goods" data-id="{$val.id}">
                <div class="park-comment-goods">
                    <div class="park-comment-goods__img" style="background-image: url('{$val.thumb}')"></div>
                    <div class="park-comment-goods-info">
                        <div class="park-comment-goods__name">{$val.goods_name}</div>
                        <div class="park-comment-goods__rate">评分</div>
                        <div class="park-comment-goods__star">
                            <div class="park-rate">
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <input type="hidden" required class="star">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="" style="background-color: #f5f8fa;">
                    <div class="park-comment-textarea">
                        <textarea class="work-textarea" maxlength="500" placeholder="请输入您对商品的评价..."></textarea>
                        <p class="work-number">0/500</p>
                    </div>
                    <div class="park-opinion-images" style="padding:0 10px;">
                        <ul class="form_list">
                            <li>
                                <label class="park-file">
                                    <input class="file" type="file" accept="image/png, image/jpeg, image/jpg, image/gif" onchange="file_contents(this);">
                                    <i class="iconfont icon-jiahao"></i>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            </volist>
        </div>
        <button type="submit" class="park-btn park-btn-bottom park-btn-default mt-footer__btn">提交</button>
    </form>
</div>
<script src="__ROOT__/Public/Home/js/Rate.js"></script>
<script src="__ROOT__/Public/Home/layer/layer.js"></script>
<script>
    $(function () {
        $.each($('.park-rate'), function (index, item) {
            new Rate($(item))
        });

        $(document).on('change input', '.work-textarea', function () {
            var len = $(this).val().length;
            var workElem = $(this).parent().find('.work-number');
            workElem.text(len + '\/500');
        });

    });
    function file_contents(obj){
        window.obj = obj;
        var file = obj.files[0];
        PARK.getBase64(file, prependImage);
        var url = '/Home/User/feedback/';
        PARK.ajaxFileData(url, 'post', file, function (res) {
            var res = JSON.parse(res);
            $(obj).parent().parent().parent().find('li:first-child').append('<input type="hidden" name="images[]" class="img" value="'+res.result+'">');
        });
    }
    function prependImage (imgSrc) {
        var img = $('<div class="image"></div>').css('backgroundImage', 'url('+imgSrc+')');
        img.append('<div class="del"> <i class="iconfont icon-del"></i> </div>');
        var li = $('<li></li>').append(img);
        $(obj).parent().parent().parent().prepend(li);
    }
    function sub_comment(){
        $('.park-order-goods').each(function(){
            var id = $(this).attr('data-id');
            var star = $(this).find('.star').val();
            var contents = $(this).find('.work-textarea').val();
            window.img = '';
            $(this).find('.img').each(function(){
                window.img+=$(this).val()+',';
            });
            $.post('/Home/User/add_comment/',{order_id:id,star:star,contents:contents,images:img},function(data){
                layer.open({
                    content: data.msg
                    ,btn: ['确定']
                    ,shadeClose:false
                    ,yes: function(index){
                        window.location = '/Home/User/order/';
                    }
                });
            },'json');
        });
        return false;
    }
</script>
</body>
</html>